<template>
  <div id="main-tab-bar">
    <TabBar>
      <tabbaritem path="/home">
        <template v-slot:item-icon>
          <span class="iconfont icon-home"></span>
        </template>
        <template v-slot:item-icon-active>
          <span class="iconfont icon-home"></span>
        </template>
        <template v-slot:item-text><div>首页</div></template>
      </tabbaritem>
      <tabbaritem path="/category">
        <template v-slot:item-icon>
          <span class="iconfont icon-category"></span>
        </template>
        <template v-slot:item-icon-active>
          <span class="iconfont icon-category"></span>
        </template>
        <template v-slot:item-text><div>分类</div></template>
      </tabbaritem>
      <tabbaritem path="/shopcar">
        <template v-slot:item-icon>
          <span class="iconfont icon-shopcar"></span>
        </template>
        <template v-slot:item-icon-active>
          <span class="iconfont icon-shopcar"></span>
        </template>
        <template v-slot:item-text><div>购物车</div></template>
      </tabbaritem>
      <tabbaritem path="/profile">
        <template v-slot:item-icon>
          <span class="iconfont icon-profile"></span>
        </template>
        <template v-slot:item-icon-active>
          <span class="iconfont icon-profile"></span>
        </template>
        <template v-slot:item-text><div>我的</div></template>
      </tabbaritem>
    </TabBar>
  </div>
</template>

<script>
import TabBar from "../../common/tabbar/TabBar.vue";
import tabbaritem from "../../common/tabbar/TabBarItem.vue";
import "../../../assets/css/iconfont.css";
export default {
  name: "main - tab - bar",
  components: {
    TabBar,
    tabbaritem,
  },
};
</script>

<style>
#main-tab-bar {
  text-align: center;
}
.iconfont {
  font-size: 30px;
}
</style>